<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" th:href="@{/element-plus/index.css}">
</head>
<body>
    <div id="app">
        <el-row justify="space-between">
            <el-col :span="2"><h1>角色列表</h1></el-col>
            <el-col :span="2"
            ><el-button
                    type="primary"
                    size="large"
                    @click="dialogVisible = true"
            >添加角色</el-button
            ></el-col
            >
        </el-row>
        <el-row>
            <el-col>
                <el-table :data="tableData" style="width: 100%"
                          empty-text="暂无数据"
                >
                    <el-table-column
                            label="序号"
                            width="180"
                    >
                        <template #default="scope">
                            <span>{{ scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="角色名称"
                            width="180"
                    ></el-table-column>
                    <el-table-column
                            prop="roleDesc"
                            label="角色描述"
                    ></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button
                                    size="small"
                                    @click="handleEdit(scope.$index, scope.row)"
                            >Edit</el-button
                            >
                            <el-popover trigger="click" :visible="scope.row.visible" placement="top" :width="160">
                                <p>确认要删除当前数据吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="small" text @click="popoverCancel(scope.row)">取消</el-button>
                                    <el-button size="small" type="primary" @click="deleteRow(scope.row)"
                                    >确认</el-button
                                    >
                                </div>
                                <template #reference>
                                    <el-button
                                            size="small"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)"
                                    >Delete</el-button
                                    >
                                </template>
                            </el-popover>

                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-pagination layout="total, prev, pager, next, sizes " :total="page.total"
                               prev-text="上一页"
                               next-text="下一页"
                               :page-sizes="page.pageSizes"
                               v-model:page-size="page.size"
                               v-model:current-page="page.current"
                               background
                               @current-change="getData"
                               @size-change="getData"
                ></el-pagination>
            </el-col>
        </el-row>

        <!-- 添加界面 -->
        <el-dialog
                v-model="dialogVisible"
                :close-on-click-modal="false"
                :title="dialogTitle"
                @close="cancel"
                width="30%"
        >
            <el-form :model="role" label-width="120px" :rules="rules" ref="roleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="role.roleName" />
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="role.roleDesc" type="textarea" />
                </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit">
                  提交
                </el-button>
              </span>
            </template>
        </el-dialog>
    </div>


<script type="text/javascript" th:inline="javascript">
    // thymeleaf 获取当前项目路径
    /*<![CDATA[*/
    const ctx = /*[[@{/}]]*/;
    /*]]>*/
</script>
<script th:src="@{/js/vue.global.js}"></script>
<script th:src="@{/element-plus/index.js}"></script>
<script th:src="@{/element-plus/zh-cn.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script>
    // 创建 vue 应用
    const app = Vue.createApp({
        data(){
            return{
                dialogVisible: false,
                tableData: [],
                dialogTitle: "添加",
                dialogLoading: false,
                page: {
                    pageCount: 0,
                    total: 0,
                    current: 1,
                    hidden: true,
                    size: 2,
                    pageSizes: [1, 2, 5, 10, 15]
                },
                role:{},
                rules:{
                    roleName: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                        { min: 2, max:10, message: '角色名称长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    roleDesc: [
                        { required: true, message: '请输入角色描述', trigger: 'blur' }
                    ]
                },
                visible: false
            }
        },
        methods:{

            handleDelete(index, row) {
                row.visible = true;
            },
            cancel(){
                this.dialogVisible = false;
                this.role = {}
            },
            popoverCancel(scope){
              scope.visible = false;
            },
            deleteRow(row){
                row.visible = false;
                axios.delete(ctx + 'role/' + row.id).then((res) => {
                    if (res.data.code == 200){
                        // 删除成功
                        this.$message({
                            message: '删除成功',
                            type: 'success', // 消息类型，可选值有 'success', 'warning', 'info', 'error'
                        });
                        this.getData();
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error', // 消息类型，可选值有 'success', 'warning', 'info', 'error'
                        });
                    }
                })
            },
            submit(e){
                // 校验数据
                this.$refs.roleForm.validate((valid) => {
                    if (valid) {
                        let btn = e.target.parentNode;
                        btn.disabled = true;
                        // 提交数据
                        axios.post(ctx + 'role/add', this.role).then(res => {
                            let result = res.data; // 响应的结果
                            if (result.code == 200){
                                this.role = {};
                                this.$message({
                                    message: '提交成功',
                                    type: 'success', // 消息类型，可选值有 'success', 'warning', 'info', 'error'
                                });
                                this.dialogVisible = false;
                                this.getData();
                            }
                        }).catch(err => {
                            console.error(err);
                        }).finally(() => {
                            btn.disabled = false;
                        })
                    }
                });
            },
            getData(){
                // 获取数据
                axios.get(ctx + 'role/list', {
                    params: {
                        page: this.page.current,
                        size: this.page.size
                    }

                }).then(res => {
                    console.log(res);
                    let result = res.data; // 响应的结果
                    if (result.code == 200){
                        this.tableData = result.data.records;
                        this.page.total = result.data.total;
                        this.page.pageCount = result.data.pages;
                    } else {
                        console.error("获取数据失败");
                    }
                });
            },
            handleEdit(index, row) {
                this.dialogVisible = true;
                this.dialogTitle = "编辑";
                this.role = row;
            },
        },

        // 挂载后执行
        mounted(){
            // 获取数据
            this.getData();
        },

    });

    // 注册组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });


    // 挂载
    const vm = app.mount('#app');


</script>
</body>
</html>